<!--
* Description: 接口管理主页面
* Company: 联宝（合肥）电子科技有限公司
* Author: Dongxu.Ni
* Date: 2020/3/5 15:14
-->
<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <template slot="btn">
        <el-button
          v-if="$hasPer('checkUpdate')"
          class="btn-custom"
          icon="el-icon-s-help"
          plain
          size="mini"
          type="success"
          @click="checkDialogVisible = true"
        >
          {{ $t('button.checkUpdate') }}
        </el-button>
        <el-button
          v-if="$hasPer('reset')"
          class="btn-custom"
          icon="el-icon-refresh-left"
          plain
          size="mini"
          type="danger"
          @click="reset"
        >
          {{ $t('button.reset') }}
        </el-button>
        <el-button
          v-if="$hasPer('save')"
          class="btn-custom"
          icon="el-icon-tickets"
          plain
          size="mini"
          type="primary"
          @click="save"
        >
          {{ $t('button.save') }}
        </el-button>
      </template>
      <template>
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="small">
          <el-row>
            <el-col :span="6">
              <el-form-item :label="$t('Api.apiPath')">
                <el-input v-model="queryForm.apiPath" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Api.apiNameEn')">
                <el-input v-model="queryForm.apiNameEn" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Api.apiNameZhCn')">
                <el-input v-model="queryForm.apiNameZhCn" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Api.apiNameZhTw')">
                <el-input v-model="queryForm.apiNameZhTw" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item :label="$t('Api.requestType')">
                <el-input v-model="queryForm.requestType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Api.group')">
                <el-input v-model="queryForm.group" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Api.keepLog')">
                <el-select v-model="queryForm.keepLog" :placeholder="$t('select.placeholder')">
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('YN')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Api.isOpen')">
                <el-select v-model="queryForm.isOpen" :placeholder="$t('select.placeholder')">
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('YN')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item :label="$t('Api.isForbidden')">
                <el-select v-model="queryForm.isForbidden" :placeholder="$t('select.placeholder')">
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('YN')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <el-table-column align="center" fixed :label="$t('table.NO')" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <el-table-column
          align="left"
          header-align="center"
          :label="$t('Api.apiPath')"
          min-width="350px"
          prop="apiPath"
        />
        <!-- 接口路径 -->
        <el-table-column
          align="center"
          :label="$t('Api.apiNameEn')"
          show-overflow-tooltip
          width="400"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.apiNameEn" size="mini" />
          </template>
        </el-table-column>
        <!-- 接口名称简 -->
        <el-table-column align="center" :label="$t('Api.apiNameZhCn')" width="250">
          <template slot-scope="scope">
            <el-input v-model="scope.row.apiNameZhCn" size="mini" />
          </template>
        </el-table-column>
        <!-- 接口名称繁 -->
        <el-table-column align="center" :label="$t('Api.apiNameZhTw')" width="250">
          <template slot-scope="scope">
            <el-input v-model="scope.row.apiNameZhTw" size="mini" />
          </template>
        </el-table-column>
        <!-- 接口类型 -->
        <el-table-column
          align="center"
          :label="$t('Api.requestType')"
          min-width="100"
          prop="requestType"
        />
        <!-- 所属分组 -->
        <el-table-column align="center" :label="$t('Api.group')" min-width="250" prop="group" />
        <!-- 是否记录日志 -->
        <el-table-column align="center" :label="$t('Api.keepLog')" width="150">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.keepLog" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Api.isOpen')" width="80">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isOpen" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Api.isForbidden')" width="80">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isForbidden" />
          </template>
        </el-table-column>
      </template>

      <template slot="end">
        <!--后列-->
      </template>
    </BaseTable>
    <!--检查更新对话框-->
    <el-dialog
      v-if="checkDialogVisible"
      :append-to-body="true"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="$t('Api.checkUpate')"
      :visible.sync="checkDialogVisible"
      width="70%"
    >
      <ApiCheck />
    </el-dialog>
  </BaseWrap>
</template>

<script>
import { apiBatchEdit, apiPageList, apiReset } from '../../../api/sys/api'
import ApiCheck from './components/ApiCheck'

export default {
  name: 'ApiManager',
  components: { ApiCheck },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        apiPath: '',
        apiNameEn: '',
        apiNameZhCn: '',
        apiNameZhTw: '',
        requestType: '',
        group: '',
        keepLog: '',
        isOpen: '',
        isForbidden: ''
      },
      checkDialogVisible: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    /* 数据初始化*/
    pageDataInit() {
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      this.advanceOptionDrawer = false
      try {
        this.isRequesting = true
        const response = await apiPageList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = response.data.list
        this.total = response.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 保存数据*/
    save() {
      apiBatchEdit(this.tableData)
        .then(() => {
          this.query()
          this.$message({
            type: 'success',
            message: '操作成功',
            duration: 1000
          })
        })
        .catch(err => err)
    },
    reset() {
      apiReset()
        .then(() => {
          this.query()
        })
        .catch(err => err)
    }
  }
}
</script>

<style scoped></style>
